<template>
	<view>
		<!-- 頂部背景圖 -->
		<image class="login-back-image" src="https://app.yycjkb.cn/index/fujiajia/header.png" mode="widthFix">
		</image>

		<view class="container">
			<!-- form表單 -->
			<!-- <form @submit="formSubmit"> -->
				<view class="login-form">
					<view class="login-form-input">
						<view class="login-input-item">
							<image src="https://app.yycjkb.cn/index/fujiajia/username.png" mode=""></image>
							<input type="text" v-model="mobile" placeholder="请输入账号" />
						</view>
						<view class="login-input-item">
							<image src="https://app.yycjkb.cn/index/fujiajia/password.png" mode=""></image>
							<input type="password" v-model="password" placeholder="请输入登录密码" />
						</view>
						<view class="radio">
							<view class="login-input-radio">
								<image v-if="radioJduge" class="login-radio" @click="radioJduge = false"
									src="https://app.yycjkb.cn/index/fujiajia/1509.png" mode="">
								</image>
								<image v-else class="login-radio" @click="radioJduge = true"
									src="https://app.yycjkb.cn/index/fujiajia/15029.png" mode="">
								</image>
							</view>
							<view class="">
								勾选代表同意付加加的<text>《用户协议》</text>
							</view>
						</view>
					</view>
					<view class="">
						<button class="login-form-btn" @tap="submit">登录</button>
					</view>
					<view class="other">
						<view class="" @tap="forget()">
							忘记密码
						</view>
						<view class="" @tap="register()">
							去注册
						</view>
					</view>
				</view>
			<!-- </form> -->
		</view>

		<!-- 底部背景圖 -->
		<image class="login-back-bottom-image" src="https://app.yycjkb.cn/index/fujiajia/bottom.png" mode="widthFix"></image>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import graceChecker from '@/common/graceChecker.js';

	export default {
		data() {
			return {
				radioJduge: true,
				checkbox: [{
					value: 'A',
					checked: true
				}],
				agreement: false,
				logo: '',
				userInfo: {
					avatarUrl: '',
					nickName: null,
					gender: 0
				},
				platform: 'h5',
				pageroute: '',
				provider: null,
				timer: null,
				third_id: 0,
				canIUseGetUserProfile: false, // 1.0.7 升级
				password: '',
				inviteCode: '',
				mobile: '',
				code: '',
				login_bg: '',
				status: 'login',
				radio: false,
			};
		},
		onLoad(options) {

			if (options.cid) {
				this.inviteCode = options.cid
				this.$store.commit('setInviteCode', options.cid);
			}
			this.detail();

		},
		methods: {
			send(e) {

				if (!this.mobile) {
					this.toast('请输入手机号')
				}
				// 定义表单规则
				// let rule = [{
				// 		name: 'mobile',
				// 		checkType: 'phoneno',
				// 		checkRule: "1,11",
				// 		errorMsg: '手机号不正确'
				// 	},
				// ];
				// //进行表单检查
				// var formData = e.detail.value;
				// console.log(formData)
				// var checkRes = graceChecker.check(formData, rule);
				// if (checkRes) {

				user.sendsms({
					mobile: this.mobile,
					event: 'register'
				}).then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						console.log(res.data)

					}
					this.toast(res.msg)
				})
				// }
			},
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			detail() {
				this.inviteCode = this.$store.state.inviteCode;
				// 登录账号
				user.detail().then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						this.logo = res.data.logo;

						this.login_bg = res.data.mobile_login_bg;

					}
				})
			},
			download() {

				window.location.href = 'https://app.yycjkb.cn/fujiajia.apk'

			},
			submit() {
				if (!this.mobile) {
					this.toast('请输入手机号')
				}
				if (!this.password) {
					this.toast('请输入密码')
				}
				// 登录账号
				user.login({
					account: this.mobile,
					password: this.password
				}).then(res => {
					uni.hideLoading();
					if (res.code !== 1) {
						return this.toast(res.msg)
					}
					if (res.code === 1) {
						this.$store.commit('setHasLogin', true);
						this.$store.commit('setToken', res.data.userinfo.token);
						this.$store.commit('setUserInfo', res.data.userinfo);
						// uni.navigateBack();
						uni.navigateTo({
							url: '/pages/my/index'
						})
					}
				})
			},
			formSubmit(e) {
				//定义表单规则
				let rule = [
					// {
					// 	name: 'nickName',
					// 	checkType: 'string',
					// 	checkRule: "1,20",
					// 	errorMsg: '用户名应该1-10字符之间'
					// },
					{
						name: 'password',
						checkType: 'string',
						checkRule: '6,16',
						errorMsg: '密码至少6位'
					},

					{
						name: 'mobile',
						checkType: 'phoneno',
						checkRule: '1,11',
						errorMsg: '手机号不正确'
					},

					{
						name: 'code',
						checkType: 'string',
						checkRule: '1,4',
						errorMsg: '验证码不正确'
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					user.register({
						username: this.mobile,
						password: this.password,
						inviteCode: this.inviteCode,
						mobile: this.mobile,
						code: this.code,
					}).then(res => {
						uni.hideLoading();
						if (res.code !== 1) {
							return this.toast(res.msg)
						}
						if (res.code === 1) {
							this.$store.commit('setHasLogin', true);
							this.$store.commit('setToken', res.data.userinfo.token);
							this.$store.commit('setUserInfo', res.data.userinfo);
							this.$store.commit('removeInviteCode'); // 删除缓存的邀请码

							// #ifdef H5
							window.location.href = 'https://app.yycjkb.cn/fujiajia.apk'
							// #endif

							// #ifdef APP-PLUS
							uni.navigateBack();
							// #endif

							uni.showModal({
								title: '您已注册成功，添加"付加加"公众号登录或下载APP登录'
							})

							// setTimeout(() => {
							// 	uni.redirectTo({
							// 		url: '/page/my/index'
							// 	})
							// }, 5000)

							// uni.navigateBack();
							// this.$store.dispatch('user/login', res);
							// uni.reLaunch({url: decodeURIComponent(this.pageroute)});
						}
					})


					// this.$api.post({
					// 	url: 'v1/wechat/config/register',
					// 	data: {
					// 		third_id: this.third_id,
					// 		avatarUrl: this.userInfo.avatarUrl,
					// 		nickName: this.userInfo.nickName,
					// 		gender: this.userInfo.gender,
					// 		password: this.password
					// 	},
					// 	success: res => {
					// 		// 绑定成功自动跳转登录接口
					// 		this.$api.post({
					// 			url: 'auth/login',
					// 			data: {
					// 				username: res.name,
					// 				password: this.password,
					// 				get_user_info: true,
					// 			},
					// 			success: res => {
					// 				this.$store.dispatch('user/login', res);
					// 				uni.reLaunch({url: decodeURIComponent(this.pageroute)});
					// 			}
					// 		});
					// 	}
					// });
				} else {
					return this.toast('请填写用户名')
					// this.$wanlshop.msg('请填写用户名');
				}
			},
			refuseUserInfo() {
				this.$wanlshop.back(1);
			},
			toChange(status) {
				// console.log(status)
				this.status = status;
			},
			register() {
				uni.navigateTo({
					url: '/pages/my/register'
				})
			},
			forget() {
				uni.navigateTo({
					url: '/pages/my/forget'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	page,
	html {
		background-color: #fff;
	}

	.login-back-image {
		width: 750rpx;
		  position: relative;
		  z-index: 1;
	}

	.login-back-bottom-image {
		  width: 950rpx;
		  position: fixed;
		  left: 0;
		  bottom: 0;
		  z-index: -1;
	}

	.container {
		width: 90%;
		  margin: auto;
		  min-height: calc(10vh - 178rpx);  /* 给底部留出空间 */
		  padding-bottom: 178rpx;            /* 防止内容被底部遮挡 */

		.login-form {
			padding-top: 100rpx;

			.login-input-item {
				display: flex;
				background-color: rgb(248, 248, 248);
				padding: 25rpx 0;
				// box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
				margin-bottom: 30rpx;
				border-radius: 16rpx;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
				}

				input {
					font-size: 26rpx;
					padding-left: 20rpx;
				}
			}

			.login-form-btn {
				margin-top: 50rpx;
				width: 100%;
				background: linear-gradient(90deg, rgba(254, 176, 122, 1) 35%, rgba(242, 171, 235, 1) 100%);
				justify-content: center;
				color: #fff;
				border-radius: 20rpx;
				height: 96rpx;
				display: flex;
				align-items: center;
			}

			.other {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				color: #b4b4b4;
				font-size: 26rpx;
			}
		}

		.radio {
			display: flex;
			align-items: center;
			color: #cccccc;

			.login-radio {
				vertical-align: middle;
				width: 33rpx;
				margin-right: 10rpx;
				height: 33rpx;
			}

			text {
				color: rgb(250, 158, 73);
			}
		}


	}
</style>